<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>对抗攻击算法展示</title>
    <style>
        #result{
            display: flex;
            width: 100%;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center">对抗攻击算法展示</h1>
    <form>
        <label for="algorithm">算法：</label>
        <select id="algorithm" name="algorithm">
            <option value="nettack">Nettack</option>
            <option value="mettack">Mettack</option>
            <option value="ig_attack">IG-Attack</option>
        </select>
        <label for="dataset">数据集：</label>
        <select id="dataset" name="dataset">
            <option value="cora">Cora</option>
            <option value="citeseer">Citeseer</option>
        </select>
        <label for="attack_type">攻击范围：</label>
        <select id="attack_type" name="attack_type">
            <option value="train">训练集攻击</option>
            <option value="test">测试集攻击</option>
        </select>
        <label>攻击节点：</label>
        <input id="nodeInput" type="number">
        <button id="submitButton" type="button" >提交</button>
    </form>
    <div id="result"></div>
    <script>
        let selectS = document.querySelector("#algorithm")
        let submitButton = document.querySelector("#submitButton")
        let nodeInput = document.querySelector("#nodeInput")
        let attack_type = document.querySelector("#attack_type")
        let result =  document.querySelector("#result")
        submitButton.addEventListener("click",()=>{
            result.innerHTML = ""
            let dataset = document.querySelector("#dataset")
            if(nodeInput.value !== ""){
                  let datasetElement = document.getElementById("dataset");
                  let selectedDataset = datasetElement.value;
                if((selectedDataset === "cora")&&nodeInput.value>2484){
                    alert('数据不合法,输入范围在0-2485之间')
                    return
                }else if(nodeInput.value>2110){
                    alert('数据不合法,输入范围在0-2110之间')
                    return
                }
                submitForm("/single",{
                    "algorithm":algorithm.options[algorithm.selectedIndex].value,
                    "dataset":dataset.options[dataset.selectedIndex].value,
                    "node":nodeInput.value
                },renderImgToRes
                )
            }
            else{
            submitForm("/whole",{
                    "algorithm":algorithm.options[algorithm.selectedIndex].value,
                    "dataset":dataset.options[dataset.selectedIndex].value,
                    "data_type":attack_type.options[attack_type.selectedIndex].value
                },renderImgToRes)
            }
        })
        selectS.addEventListener('change',()=>{
            let form = document.querySelector("form");
            if(selectS.options[selectS.selectedIndex].value == "mettack") {
                for (let i = 0; i < form.children.length; i++) {
                    if (i != form.children.length - 1 && i >= 4) {
                        form.children[i].style.visibility = "hidden";
                    }
                }
            }else{
                for (let i = 0; i < form.children.length; i++) {
                    form.children[i].style.visibility = "visible";
                }
            }
        })
        async function submitForm(api,data,callBack){
            let url = "http://127.0.0.1:5000"+api
            let res =await fetch(url,
                {
                    method:'POST',
                    headers:{
                        "Content-Type":"application/json"
                    },
                    body:JSON.stringify(data)
                }
            )
            let blob =await res.blob()
            callBack(URL.createObjectURL(blob))
        }
        function renderImgToRes(src){
            let tempImg = document.createElement("img")
            tempImg.src = src
            result.append(tempImg)
        }
    </script>
</body>
</html>